<template>
  <div class=" scroller" style="line-height: 0.16;font-size: .16rem;">
    <!-- input查询 -->
    <div class="search-wrapper">
      <div class="wx-search-title-add">中联物流</div>
      <div class="weui_search_bar weui_search_focusing" id="search_bar">
        <form class="weui_search_outer " style="">
          <div class="weui_search_inner">
            <i class="weui_icon_search"></i>
            <input type="search" class="weui_search_input " id="search_input"
                   placeholder="按照客户订单号或者中联订单号搜索" v-model="keyword"/>
          </div>
        </form>
      </div>
      <div class="pad-l-r10">
        <!--按钮-->
        <div style="width: 100%;height: 100%" class="mt15 mb10">
          <button    :class="[{'kas-wb-search':btnChange}]" style="width: 100%"
                     :disabled="isDisabled"   class="button " @click="searchClick" >查&nbsp;&nbsp;询</button>
        </div>
      </div>
    </div>
    <!-- 订单信息 -->
    <div class="pad-l-r10 order-info-wrapper">
      <div class="" style="height: auto;width: 100%">
        <!--无-->
        <div v-show="!infoShow"  class=" no-info" style="padding-top: .4rem">
          暂无订单信息
        </div>
        <!--有-->
        <div v-show="infoShow" >
          <div v-for="(item,index) in orderQueryData" :key='index' class=" order-info mb15">
            <p class="order-info-row mb15">
              <span class="mr20">中联订单号:</span>
              <span>{{item.sysOrderNo}}</span>
            </p>
            <p class="order-info-row mb15">
              <span class="mr20">客户订单号:</span>
              <span>{{item.customerOrderNo}}</span>
            </p>
            <p class="order-info-row mb15">
              <span class="mr20">客户名称:</span>
              <span>{{item.customerName}}</span>
            </p>
            <p class="order-info-row mb15">
              <span class="mr20">订单日期:</span>
              <span>{{item.orderDate|formatDate}}</span>
            </p>
            <p class="order-info-row mb15">
              <span class="mr20">车架号:</span>
              <span>{{item.vin}}</span>
            </p>
            <p class="order-info-row mb15">
              <span class="mr20">车型代码:</span>
              <span>{{item.styleCode}}</span>
            </p>
            <p class="order-info-row mb15">
              <span class="mr20">车型名称:</span>
              <span>{{item.styleName}}</span>
            </p>
            <!-- <p class="order-info-row mb15">
              <span class="mr20">车辆底盘号:</span>
              <span>{{item.vehicleVin}}</span>
            </p> -->
            <p class="order-info-row mb15">
              <span class="mr20" >经销商名称:</span>
              <span >{{item.dealerName}}</span>
            </p>

            <p class="p-line mb10"></p>
            <p class="order-info-row mb15">
              <span class="mr20" >发车省:</span>
              <span >{{item.oProvince}}</span>
            </p>
            <p class="order-info-row mb15">
              <span class="mr20" >发车市:</span>
              <span >{{item.oCity}}</span>
            </p>
            <p class="order-info-row mb15">
              <span class="mr20" >发车地址:</span>
              <span >{{item.oAddress}}</span>
            </p>
            <p class="order-info-row mb15">
              <span class="mr20" >收车省:</span>
              <span >{{item.dProvince}}</span>
            </p>
            <p class="order-info-row mb15">
              <span class="mr20" >收车市:</span>
              <span >{{item.dCity}}</span>
            </p>
            <p class="order-info-row mb15">
              <span class="mr20" >收车地址:</span>
              <span >{{item.dAddress}}</span>
            </p>

            <p class="p-line mb10"></p>
            <p class="order-info-row mb15">
              <span class="mr20" >运输距离(km):</span>
              <span >{{item.distance}}</span>
            </p>
            <p class="order-info-row mb15">
              <span class="mr20" >订单状态:</span>
              <span >{{item.orderStatus}}</span>
            </p>
            <p class="order-info-row mb15">
              <span class="mr20" >运输方式:</span>
              <span >{{item.transportType}}</span>
            </p>
            <p class="order-info-row mb15">
              <span class="mr20" >接单时间:</span>
              <span >{{item.orderCreateTime|formatDate}}</span>
            </p>
            <p class="order-info-row mb15">
              <span class="mr20" >提车时间:</span>
              <span >{{item.pickTime|formatDate}}</span>
            </p>
            <p class="order-info-row mb15">
              <span class="mr20" >打单时间:</span>
              <span >{{item.printOrderTime|formatDate}}</span>
            </p>
            <p class="order-info-row mb15">
              <span class="mr20" >入中联库时间:</span>
              <span >{{item.inboundTime|formatDate}}</span>
            </p>
            <p class="order-info-row mb15">
              <span class="mr20" >安排运力时间:</span>
              <span >{{item.arrangeCapacityTime|formatDate}}</span>
            </p>
             <p class="order-info-row mb15">
              <span class="mr20" >出中联库时间:</span>
              <span >{{item.outboundTime|formatDate}}</span>
            </p>
            <p class="order-info-row mb15">
              <span class="mr20" >入铁路库时间:</span>
              <span >{{item.enterRailwayTime|formatDate}}</span>
            </p>
            <p class="order-info-row mb15">
              <span class="mr20" >装车时间:</span>
              <span >{{item.loadTime|formatDate}}</span>
            </p>
            <p class="order-info-row mb15">
              <span class="mr20" >离昌时间:</span>
              <span >{{item.leaveTime|formatDate}}</span>
            </p>
            
            <p class="p-line mb10"></p>
            <!-- <p class="order-info-row mb15">
              <span class="mr20" >承运车队:</span>
              <span >{{item.supplier}}</span>
            </p> -->
            <p class="order-info-row mb15">
              <span class="mr20" >司机联系方式:</span>
              <span >{{item.driverPhone}}</span>
            </p>
            <p class="order-info-row mb15">
              <span class="mr20" >车牌号:</span>
              <span >{{item.licensePlate}}</span>
            </p>
            <p class="order-info-row mb15">
              <span class="mr20" >预计送达时间:</span>
              <span >{{item.planShiptoTime|formatDate}}</span>
            </p>
            <p class="order-info-row mb15">
              <span class="mr20" >送达时间:</span>
              <span >{{item.shiptoTime|formatDate}}</span>
            </p>
            <p class="order-info-row mb15">
              <span class="mr20" >回单时间:</span>
              <span >{{item.returnOrderTime|formatDate}}</span>
            </p>
            <p class="order-info-row mb15">
              <span class="mr20" >发运类型:</span>
              <span >{{item.shipmentType}}</span>
            </p>
            <p class="order-info-row mb15">
              <span class="mr20" >最新在途位置:</span>
              <span >{{item.newestPosition}}</span>
            </p>
            <p class="order-info-row mb15">
              <span class="mr20" >最新在途时间:</span>
              <span >{{item.newestTime|formatDate}}</span>
            </p>
          </div>
        </div>
      </div>
    </div>

    <v-loading v-show="loadingShow" style="z-index: 11"></v-loading>
  </div>
</template>

<script>
import { orderQuery } from '@/api/web/webOrder.js'
import Loading from '@/components/loading/loading.vue'
import { formatDate } from '@/utils/date.js'
export default {
  data() {
    return {
      btnChange: false,
      keyword: '',
      infoShow: false,
      isDisabled: true, // 禁止点击
      orderQueryData: [],
      loadingShow: false
    }
  },
  components: { 'v-loading': Loading },
  mounted() {
    this.$watch('keyword', (newVal) => {
      const val = newVal
      if (val !== '') {
        this.btnChange = true
        this.isDisabled = false
      } else {
        this.btnChange = false
        this.isDisabled = true
      }
    })
  },
  created() {
    this.initRem()
  },
  filters: {
    formatDate(time) {
      const date = new Date(time)
      return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
    }
  },
  methods: {
    initRem() {
      document.documentElement.style.fontSize = document.documentElement.clientWidth / 3.75 + 'px'
      // 设计稿是375px ，HTML的font-size:100px;
      window.onresize = function() {
        document.documentElement.style.fontSize = document.documentElement.clientWidth / 3.75 + 'px'
      }
    },
    searchClick() {
      // console.log('点击了', this.keyword)
      // this.infoShow = true
      this.loadingShow = true
      orderQuery(this.keyword).then(res => {
        if (res.code === 0) {
          this.orderQueryData = res.data
          console.log('请求成功-orderQueryData', this.orderQueryData)
          this.infoShow = true
          this.isDisabled = true
        } else {
          console.warn('error', res.message)
        }
        this.loadingShow = false
      }).catch(res => {
        console.warn('error', res)
        this.loadingShow = false
      })
    }
  }
}
</script>
<style type="text/css" scoped>
  .pad-l-r15{
    padding-left: .15rem;
    padding-right: .15rem;
  }
  .pad-l-r10{
    padding-left: .1rem;
    padding-right: .1rem;
  }
  .mt10{
    margin-top: .1rem;
  }
  .mb10{
    margin-bottom: .1rem;
  }
  .mt30{
    margin-top: .3rem;
  }
  .mt15{
    margin-top: .15rem;
  }
  .mr20{
    margin-right: .2rem;
  }
  .mb15{
    margin-bottom: .15rem;
  }
  .mr34{
    margin-right: .34rem;
  }
</style>
<style rel="stylesheet/css" lang="css" scoped>
.scroller {
  background-color: #e9eaeb;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.search-wrapper{
  width: 100%;
  height: 1.7rem;
  color: #ffffff;
  position: absolute;;
  top: 0;
  left: 0;
  bottom: 0;
  z-index:2;
}
.wx-search-title-add {
  /* height: 50px;
  line-height: 50px;
  text-align: center;
  color: #000;
  font-size: 16px;  */
  height: 0.5rem;
  line-height: 0.5rem;
  text-align: center;
  color: #000;
  font-size: .16rem;
}
.weui_search_bar {
  position: relative;
  padding: .08rem .1rem;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  box-sizing: border-box;
  background-color: #efeff4;
  z-index: 2;
}
.weui_search_bar:before {
  content: " ";
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  color: #c7c7c7;
  -webkit-transform: scaleY(.5);
  transform: scaleY(.5);
}
.weui_search_bar:before {
  top: 0;
  border-top: 1px solid #c7c7c7;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}
.weui_search_outer {
  position: relative;
  -webkit-box-flex: 1;
  -webkit-flex: auto;
  -ms-flex: auto;
  flex: auto;
  background-color: #efeff4;
}
.weui_search_inner {
  padding-left: .3rem;
  padding-right: .3rem;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  justify-content: left;
  align-items: center;
  display: flex;
}
.weui_search_inner .weui_icon_search {
  position: absolute;
  left: .1rem;
  top: 20%;
  line-height: .20rem;
  font-size: .14rem;
}
.weui_icon_clear:before, .weui_icon_search:before {
  color: #fc8325;
  font-size: .14rem;
}
.weui_search_inner .weui_search_input {
  width: 100%;
  height: .2rem;
  border: 0;
  font-size: .14rem;
  line-height: .2rem;
  box-sizing: content-box;
  background: transparent;
  padding:.06rem 0;
}
.weui_search_outer:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 200%;
  height: 200%;
  -webkit-transform: scale(.5);
  transform: scale(.5);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  border-radius: .1rem;
  border: 1px solid #e6e6ea;
  box-sizing: border-box;
  background: #fff;
}
.kas-wb-search{
  margin-top:.56rem;
  background-color: #e83a45 !important;
}
.button{
  outline:none;
  /*border-color: transparent;*/
  background-color: #dcddde ;
  color: #fff;
  position: relative;
  display: inline-block;
  margin: 0;
  padding: 0 .12rem;
  min-width:.52rem;
  min-height:.47rem;
  border-width: 1px;
  border-style: solid;
  border-radius: .04rem;
  vertical-align: top;
  text-align: center;
  text-overflow: ellipsis;
  font-size:.16rem;
  line-height: .42rem;
  cursor: pointer;
  -webkit-tap-highlight-color:transparent;
}
.button:active{
  background-color: #dcddde ;
  color: #fff;
}
/*订单信息*/
.order-info-wrapper{
  width: 100%;
  position: absolute;
  overflow-y: auto;
  top: 1.7rem;
  bottom: 0;
  left: 0;
  right: 0;
}
.order-info-wrapper::-webkit-scrollbar{
  width: 0;
  height: 0;
}
.order-info{
  background-color: #fff;
  position: relative;
  padding: .2rem .25rem;
  color: #000;
}
.no-info{
  font-size:.14rem;
  color: rgb(193, 193, 193);
  text-align: center;
  line-height: .2rem;
}
.order-info-row{
  display: flex;
  width: 100%;
  box-sizing: border-box;
  justify-content: left;
  align-items: center;
}
.order-info-row>span {
  line-height: .20rem;
  font-size: .14rem;
}
.order-info-row>span:first-child {
  white-space:nowrap;
}
.p-line{
  border-bottom: .03rem solid #e6e6e6;
  width: 100%;
}
</style>

